<template>
    <div class="content">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getData">
            <div style="font-size: 12px;" v-for="el, index in DangerProjectList" :key="index"
                :class="[el.safeState == null ? 'card3' : el.safeState == '安全' ? 'card' : 'card2']">
                <p style="font-size: 14px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: 80%;">
                    {{ el.gdpName }}
                </p>
                <p>
                    <span>风险等级：</span>
                    <span style="color: #0089FF;">{{ el.dangerlevelSet.gdpName }}</span>
                </p>
                <div class="flex">
                    <p>
                        <span>类型：</span>
                        <span>{{ el.typeSet.gdpName }}</span>
                    </p>
                    <p style="margin-left: 30px;">
                        <span>施工进度：</span>
                        <span>{{ el.constructionState == '未开始' ?
                            el.constructionSchedule : el.constructionState == '进行中' ?
                                el.constructionSchedule : el.constructionState == '已完成' ?
                                    el.constructionSchedule : '暂无' }}</span>
                    </p>
                </div>
                <p style="font-size: 14px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;width: 100%;">
                    <span>责任人：</span>
                    <span>{{ el.greatDangerProjectFlow ? el.greatDangerProjectFlow.users.map(i => i.userName).join('、')
                        : '已完结' }}</span>
                </p>
                <p class="specialText">
                    <span>主要参数：</span>
                    <span>{{ el.mainParameter }}</span>
                </p>
                <van-button type="primary" class="btn" @click="details(el)">管理流程</van-button>
            </div>
        </van-list>
    </div>
</template>

<script name="Home">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { GetGreatDangerProjectList } from "@/api";
import { useAppStore } from "../../../store";
import { CreatedFormData } from "@/utils/CreatedFormData";
import { useRouter } from "vue-router";
export default defineComponent({
    name: 'dangerousProject',
    setup() {
        const { userInfo, projectInfo } = useAppStore()
        const router = useRouter();

        const DangerProjectList = ref([])
        const loading = ref(false);
        const finished = ref(false);
        const pageIndex = ref(1);
        const getData = async () => {
            let fd = CreatedFormData(
                {
                    xid: projectInfo.id,
                    searchword: '',
                    page: pageIndex.value,
                    limit: 10,
                    nowuserid: 0
                })
            const res = await GetGreatDangerProjectList(fd);
            if (res.code == 0) {
                DangerProjectList.value = DangerProjectList.value.concat(res.data);
                pageIndex.value++;
                loading.value = false;
                if (DangerProjectList.value.length >= res.count) {
                    finished.value = true;
                }
            }
        }

        const details = (el) => {
            router.push({
                path: '/DangerousProjectDetail',
                query: {
                    id: el.id,
                }
            })
        }

        onMounted(() => { });


        return {
            DangerProjectList,
            loading,
            finished,
            getData,
            details
        };
    },
});
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;
    padding: 0 10px;
    overflow-y: auto;
}

.card {
    background: url('../../../assets/images/workbench/GroupTrue.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 480px;
    margin: 20px 0;
    padding: 20px;
    line-height: 50px;
}

.card2 {
    background: url('../../../assets/images/workbench/GroupFalse.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 480px;
    margin: 20px 0;
    padding: 20px;
    line-height: 50px;
}

.card3 {
    background: url('../../../assets/images/workbench/GroupMiddle.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 480px;
    margin: 20px 0;
    padding: 20px;
    line-height: 50px;
}

.specialText {
    text-indent: -5em;
    padding-left: 5em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 150px;
}

.btn {
    width: 100%;
    height: 80px;
    line-height: 80px;
    margin-top: 20px;
    background-color: transparent;
    border: none;
}
</style>